<template>
  <el-dialog
    title="确定取消该订单?"
    width="30%"
    top="10vh"
    center
    :visible.sync="visible"
    @close="visible = !visible"
  >
    <el-form ref="elForm" :model="formData" :rules="rules">
      <p class="mb-20 text-center">取消订单后，该订单积分会原路返回到用户账户</p>
      <el-form-item prop="cancelReason">
        <el-input
          v-model.trim="formData.cancelReason"
          type="textarea"
          placeholder="请输入取消订单备注（5-50个字以内）"
          :autosize="{ minRows: 6, maxRows: 8 }"
        />
      </el-form-item>
      <el-form-item label-width="0" class="mt-20 text-center">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'OrderCancelPopup',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        cancelReason: [
          {
            required: true,
            message: '请输入取消订单备注（5-50个字以内）',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 50,
            message: '取消订单备注在（5-50个字以内）'
          }
        ]
      },
      formData: {
        cancelReason: ''
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  methods: {
    async cacleOrder() {
      const { status, msg } = await this.$http.order.orderApi.cancelOrder({
        ...this.formData,
        orderNo: this.$route.query.orderNo
      })
      if (status === 200) {
        this.$message.success('取消成功！')
        this.$emit('update')
        this.visible = false
      } else {
        this.$message.error(msg)
      }
    },
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        this.cacleOrder()
      })
    },
    resetForm() {
      this.visible = false
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>
